<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加员工信息</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <style>
        body {
            /*background-image: url();*/
            background-repeat: no-repeat;
            background-size: 100% auto;
        }

        #sex {
            padding-left: 50px;
        }
    </style>
</head>
<body>
<h1 style="margin-left: 150px;margin-bottom: 30px">添加员工信息</h1>
<div id="addEmp-div">
    <form id="addEmp-form" class="form-group">
        <div class="input-group mb-3" style="width: 450px">
            <label for="employeeName" style="width: 140px;text-align: center;">名字:</label>
            <input type="text" name="employeeName" class="form-control" id="employeeName">
        </div>
        <div class="input-group mb-3" style="width: 450px" id="sex">
            性别：
            <label class="radio-inline" style="width: 140px;text-align: center;">
                <input type="radio" name="employeeSex" value="1">男
            </label>
            <label class="radio-inline" style="width: 140px;text-align: center;">
                <input type="radio" name="employeeSex" value="0">女
            </label>
        </div>
        <div class="input-group mb-3" style="width: 450px">
            <label for="employeeIdCard" style="width: 140px;text-align: center;">身份证号码:</label>
            <input type="text" name="employeeIdCard" step="0.01" class="form-control" id="employeeIdCard">
        </div>
        <div class="input-group mb-3" style="width: 450px">
            <label for="employeePhoneNumer" style="width: 140px;text-align: center;">手机号:</label>
            <input type="text" name="employeePhoneNumer" step="0.01" class="form-control" id="employeePhoneNumer">
        </div>
        <div class="input-group mb-3" style="width: 450px">
            <label for="employeeAddress" style="width: 140px;text-align: center;">籍贯:</label>
            <input type="text" name="employeeAddress" step="0.01" class="form-control" id="employeeAddress">
        </div>
        职位：<div v-for="job in list" class="form-check form-check-inline" style="margin-left: 10px">
            <label class="form-check-label" style="margin-left: 10px">
                <input type="checkbox" name="jobTitle" class="form-check-input" :value="job.jobId">{{ job.jobTitle }}
            </label>
        </div>
        <div class="input-group mb-3" style="width: 450px;margin-top: 30px">
            <button type="button" id="submit-btn" class="btn btn-primary"
                    style="margin-left: 150px; margin-right: 100px" @click="addEmp()">添加
            </button>
            <button type="button" class="btn btn-danger" @click="returnemployeelist()">返回</button>
        </div>
    </form>
</div>
<script type="text/javascript" src="../bootstrap/jquery3.6.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript" src="../bootstrap/vue.js"></script>
<script>

    //首先查询公司存在那些职位
    $.ajax({
        type: "post",
        url: "../Job/selJobAll",
        dataType: "json",
        success: function (json) {
            console.log(json);
            let app = new Vue({
                el: "#addEmp-div",
                data: json,
                methods: {
                    addEmp: function () {
                        $.ajax({
                            type: "post",
                            url: "../Employee/addEmp",
                            data: $("#addEmp-form").serialize(),
                            dataType: "json",
                            success: function (data) {
                                if (data.message == "添加成功") {
                                    location.href = "employee_list.html";
                                }
                            }
                        })
                    },
                    returnemployeelist: function () {
                        location.href = "Employee_list.html";
                    }
                }
            })
        }
    });

</script>
</body>
</html>